<template>
  <div class="paste-unit-render" :class="getIndentClass(fieldData.alignment)">
    <!-- 字段名称在外面（仅当填写时显示） -->
    <div v-if="fieldData.fieldName && fieldData.fieldName.trim()" class="field-label" :style="labelStyle">
      {{ fieldData.fieldName }}
    </div>
    
    <!-- 粘贴单方框 -->
    <div class="paste-container" :class="styleClass" :style="containerStyle">
      <div class="field-text" :style="textStyle">
        <div v-for="(line, index) in getInnerText().split('\n')" :key="index">
          {{ line }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  fieldData: {
    type: Object,
    required: true,
    default: () => ({
      fieldName: '样本编号:',
      innerText: '样本编号标签\\n粘贴处',
      styleType: 'style1',
      width: 5,
      height: 4,
      alignment: 'indent-0',
      prefixSymbol: '',
      isBold: false
    })
  }
})

const containerStyle = computed(() => {
  const styleType = props.fieldData?.styleType || 'style1'
  // 根据样式类型设置默认尺寸
  const defaultWidth = styleType === 'style2' ? 12 : 5
  const defaultHeight = 4
  
  const width = props.fieldData?.width || defaultWidth
  const height = props.fieldData?.height || defaultHeight
  return {
    width: `${width * 40}px`,
    height: `${height * 40}px`
  }
})

const styleClass = computed(() => {
  return props.fieldData?.styleType === 'style2' ? 'style2' : 'style1'
})

const textStyle = computed(() => {
  if (props.fieldData?.styleType === 'style2') {
    return {
      fontSize: '15px',
      fontWeight: '500'
    }
  } else {
    return {
      fontSize: '13px',
      fontWeight: '500'
    }
  }
})

const labelStyle = computed(() => {
  return {
    fontWeight: props.fieldData?.isBold ? 'bold' : 'normal'
  }
})

const getIndentClass = (alignment) => {
  const indentMap = {
    'indent-0': 'indent-0',
    'indent-1': 'indent-1',
    'indent-2': 'indent-2',
    'indent-3': 'indent-3',
    'indent-4': 'indent-4',
    'indent-5': 'indent-5'
  }
  return indentMap[alignment] || 'indent-0'
}

// 获取内部文本内容
const getInnerText = () => {
  if (props.fieldData?.innerText) {
    // 处理转义的换行符
    return props.fieldData.innerText.replace(/\\n/g, '\n')
  }
  
  const styleType = props.fieldData?.styleType || 'style1'
  return styleType === 'style2' ? '报告单粘贴页' : '样本编号标签\n粘贴处'
}
</script>

<style scoped lang="scss">
@import '@/assets/common-styles.scss';

.paste-unit-render {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  box-sizing: border-box;
  margin: 8px 0;
}

.field-label {
  font-family: '宋体', SimSun, serif;
  font-size: 12pt;
  line-height: 1.5;
  color: #000;
  white-space: nowrap;
  display: flex;
  align-items: center;
  min-height: 40px; // 确保与粘贴框对齐
}

.paste-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;

  &.style1 {
    // 样式1：样本单（无背景色）
    border: 1px solid #333;
    background-color: white;
  }

  &.style2 {
    // 样式2：报告单（浅灰色背景）
    border: 1px solid #666;
    border-radius: 0;
    background-color: #f0f0f0;
  }
}

.field-text {
  text-align: center;
  color: #333;
  user-select: none;
  font-weight: 500;
  padding: 5px;
  line-height: 1.2;
}
</style>